<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            $("input:eq(0)").click(function(){
                // console.log($("ul").children().length);
                //使用jQuery的工具函数
                $.each($("ul").children(),function(index,item){//遍历子元素
                    console.log(item);
                });
            });
            $("input:eq(1)").click(function(){
                // console.log($("li").parent().length);//获取父元素
                console.log($("li").parents().length);//获取祖先元素,html,body,ul
                $.each($("li").parents(),function(index,item){
                    console.log(item);
                });
                
            });
            $("input:eq(2)").click(function(){
               //同级别中紧邻当前选中元素的下一个元素
               $("div:eq(2)").next().css("background","red");
            });
            $("input:eq(3)").click(function(){
               //同级别中紧邻当前选中元素的上一个元素
               $("div:eq(2)").prev().css("background","red");
            });
            $("input:eq(4)").click(function(){
               //同级别中当前选中元素的前后的同级别的元素
               $("span").siblings().css("background","red");
            //    console.log( $("span").siblings().length);
               //使用工具函数$.each来进行循环遍历
            //    $.each($("span").siblings(),function(index,item){
            //         console.log(item);
            //    });

                //使用成员函数each来进行循环遍历
                // jQuery对象.each(函数)
                $("span").siblings().each(function(index,item){
                    // console.log(index);//索引
                    console.log(item);
                    // console.log(this===item);//this指代的是item
                });
                var arrs=["aa","bb","cc"];
                // arrs.each(function(index,item){//报错，这个方法数组不能使用
                //     console.log(item);
                // });

            });
        });
    </script>
</head>
<body>
    <input type="button" value="遍历子元素">
    <input type="button" value="遍历前辈元素">
    <input type="button" value="遍历同辈紧邻其后的元素">
    <input type="button" value="遍历同辈紧邻其前的元素">
    <input type="button" value="遍历同辈紧邻其前后的所有的元素">
    <p>p01</p>
    <p>p02</p>
    <p>p03</p>
    <ul>
        <li>itany01</li>
        <li>itany02</li>
        <li>itany03</li>
        <li>itany04</li>
        <li>itany05</li>
        <p>p04</p>
        <span>span01</span>
    </ul>
    <div>div01</div>
    <div>div02</div>
    <div>div03</div>
    <h3>h3</h3>
</body>
</html>